<!--图书tab-->
<template>
  <div class="tabComponent">
    <button
      v-for="tab in tabs"
      :key="tab.title"
      :class="{ tab_acitve: tab.title == currentTab }"
      @click="currentTab = tab.title"
    >
      {{ tab.displatyName }}
    </button>
    <!-- 动态切换组件 -->
    <keep-alive>
      <component :is="currentTabComponent" :content="content"></component>
    </keep-alive>
  </div>
</template>

<script>
import BookCommentList from "@/components/BookCommentList";
import BookIntroduction from "@/components/BookIntroduction";
import BookQa from '@/components/BookQa'
export default {
  name: "BookTabComponent",
  data() {
    return {
      currentTab: "introduction",
      tabs: [
        {
          title: "introduction",
          displatyName: "图书介绍",
        },
        {
          title: "comment-list",
          displatyName: "图书评价",
        },
        {
          title: "qa",
          displatyName: "图书问答",
        },
      ],
    };
  },
  props: {
    content: {
      type: String,
      default: "",
    },
  },
  components: {
    BookCommentList,
    BookIntroduction,
    BookQa
  },
  computed:{
    currentTabComponent(){
      return 'book-'+this.currentTab
    }
  }
};
</script>

<style>
.tabComponent {
  width: 100%;
  height: 100%;
}

.tabComponent button {
  line-height: 40px;
  height: 40px;
}

.tab_acitve {
  background: rgba(0, 0, 0, 0.4);
}
</style>